<template>
  <div class="content">
    <!-- 评价 -->
    <view>
      <view class="evaluate-questions-title" @click="handleJumpToComments">
        商品评价<text>（{{ commentList.length }}）</text>
      </view>
      <view class="evaluate-box flex-start flex-column">
        <!-- <view class="evaluateTag-box flex items-center" v-if="commentList.length > 0" @click="handleJumpToComments">
          <view class="title">商品评价</view>
          <view class="evaluateTag-text">({{ commentList.length }})</view>
        </view> -->
        <view
          class="evaluate-contentbox"
          v-for="(commentItem, commentIndex) in commentList.slice(0, 2)"
          :key="commentIndex"
        >
          <view class="evaluate-content flex-items flex-row flex-sp-between">
            <view class="flex-items">
              <image
                class="user-headSmallImg"
                :src="commentItem.headImage"
              ></image>
              <view>
                <view class="user-name">{{ commentItem.name }}</view>
                <view class="user-time">{{
                  commentItem.createTime.slice(0, 10)
                }}</view>
              </view>
            </view>
            <view class="like-box">
              <image
                class="like-img"
                @click="handlePraise(commentItem, 0)"
                :src="`${VUE_APP_STATIC_URL}ui-static/images/praiseActiveIcon.png`"
                v-if="commentItem.ifLike === 1"
              ></image>
              <image
                class="like-img"
                @click="handlePraise(commentItem, 1)"
                :src="`${VUE_APP_STATIC_URL}ui-static/images/praiseIcon.png`"
                v-else
              ></image>
              <view class="like-num">{{ commentItem.likes }}</view>
            </view>
          </view>
          <view class="evaluateDes-box">
            <label class="evaluateDes">{{ commentItem.comment }}</label>
          </view>
          <view class="item-image-box" v-if="commentItem.image">
            <view
              class="img-item"
              v-for="(imgItem, imgIndex) in commentItem.image.split(',') || []"
              :key="imgIndex"
            >
              <image
                @click="
                  handlePreviewImage(commentList[commentIndex].images, imgIndex)
                "
                :src="imgItem"
              ></image>
            </view>
          </view>
          <view class="item-like-box" v-if="commentItem.addComment !== ''">
            <view class="addEvaluate">
              <view>追加评价：{{ commentItem.addComment }}</view>
              <view class="item-image-box" v-if="commentItem.addImages">
                <view
                  v-for="(itemAddImg, imgIndex) in commentItem.addImages"
                  :key="imgIndex"
                >
                  <image
                    @click="
                      handlePreviewImage(
                        commentList[commentIndex].addImages,
                        imgIndex
                      )
                    "
                    class="img-item"
                    :src="itemAddImg"
                  >
                  </image>
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
  </div>
</template>

<script setup>
import { request } from "@/utils/request";
import API from "@/config/api";
import { useStore } from "vuex";
import lodash from "lodash";
import { inject, ref, toRefs, computed } from "vue";
import { VUE_APP_STATIC_URL } from "@/config/api";

const $jump = inject("$jump");

const props = defineProps({
  commentList: {
    type: Array,
    default: () => [],
  },
  productInfo: {
    type: Object,
    default: () => ({}),
  },
});

const { commentList, productInfo } = toRefs(props);



/**
 * 放大查看照片
 * @param dataList 所有照片
 * @param currentIndex 选中索引
 */
const handlePreviewImage = (dataList, currentIndex) => {
  uni.previewImage({
    current: dataList[currentIndex],
    urls: dataList,
  });
};

/**
 * 点赞
 * @param commentItem 当前评论项
 * @param action 0取消1点赞
 */
const handlePraise = lodash.debounce(async function (commentItem, actionType) {
  try {
    await request(
      API.LikeOrUnLikeComment,
      {
        commentId: commentItem.commentId,
        ifLike: actionType,
      },
      "POST"
    );
    if (commentItem.ifLike === 1) {
      commentItem.ifLike = 0;
      commentItem.likes--;
    } else {
      commentItem.ifLike = 1;
      commentItem.likes++;
    }
  } finally {
  }
}, 500);

const store = useStore();

/**
 * 跳转到全部评论
 */
const handleJumpToComments = () => {
  $jump(`/zwx_category_page1/goodsModule/evaluateList`, commentList.value);
};
</script>

<style lang="scss" scoped>
@import "../../../style/images";
.evaQaTab {
  height: 78rpx;
  line-height: 78rpx;
  font-size: 30rpx;
  margin: 0 auto;
  width: 622rpx;
  box-sizing: border-box;
  color: #cccccc;
  border-bottom: 2rpx solid #e5e7eb;

  .evaBtn {
    width: 50%;
    position: relative;
    text-align: center;
  }

  .qaBtn {
    width: 50%;
    text-align: center;
  }

  .tabTit {
    display: inline-block;
    height: 82rpx;
    line-height: 82rpx;
    width: 100%;
    color: #6b7280;
  }

  .active {
    .tabTit {
      border-bottom: 4rpx solid #ff5000;
      color: #ff5000;
    }
  }
}

.evaluate-questions-title {
  width: 626rpx;
  height: 96rpx;
  line-height: 96rpx;
  margin: auto;
  font-family: Roboto, Roboto;
  font-weight: 500;
  font-size: 36rpx;
  color: #000000;
  text {
    margin-left: 16rpx;
    font-size: 28rpx;
    color: #6b7280;
  }
}

.questions {
  width: 626rpx;
  margin: auto;
  .questionInfo {
    width: 100%;
    min-height: 150upx;

    .infoTit {
      font-size: 28upx;
    }

    .putQuestion {
      width: 124rpx;
      height: 62rpx;
      background: #ff5000;
      border-radius: 8rpx 8rpx 8rpx 8rpx;
      text-align: center;
      line-height: 62rpx;
      color: #fff;
    }
  }

  .listBox {
    width: 100%;

    .itemBox {
      padding-bottom: 30upx;
      border-bottom: 1upx solid #eeeeee;
      margin-bottom: 30upx;

      &:last-child {
        border-bottom: none;
      }

      .itemAsk {
        display: flex;
        align-items: center;
        margin-bottom: 42upx;

        i {
          font-style: normal;
          width: 38upx;
          height: 38upx;
          line-height: 38upx;
          background: #c5aa7b;
          display: block;
          margin-right: 30upx;
          font-size: 24upx;
          color: #ffffff;
          text-align: center;
        }

        span {
          font-size: 28upx;
          color: #333333;
        }
      }

      .answer {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 30upx;

        .answerBox {
          display: flex;
          align-items: center;

          i {
            font-style: normal;
            width: 38upx;
            height: 38upx;
            line-height: 38upx;
            background: #c5aa7b;
            display: block;
            text-align: center;
            margin-right: 30upx;
            font-size: 24rpx;
            color: #ffffff;
          }

          span {
            font-size: 26upx;
            color: #666666;
          }
        }

        .answerBtn {
          width: 124rpx;
          height: 62rpx;
          background: rgba(255, 80, 0, 0.1);
          border-radius: 8rpx;
          text-align: center;
          font-size: 28rpx;
          color: #ff5000;
          line-height: 62rpx;
        }
      }

      .seeAll {
        margin-left: 68upx;
        font-size: 28upx;
        color: #ff5000;
      }
    }
  }
}

.evaluate-box {
  background-color: #ffffff;

  .evaluate {
    width: 690upx;
    padding: 20upx 0;
    border-bottom: 1upx solid #ededed;
  }

  .evaluateTitle-box {
    width: 690upx;
    border-bottom: 1upx solid #ededed;
    padding-bottom: 20upx;
  }

  .evaluateAllArrow-icon {
    width: 13upx;
    height: 22upx;
  }

  .evaluateTag-box {
    font-family: Roboto, Roboto;
    font-weight: 500;
    width: 622rpx;
    margin: 0 auto 20rpx;
    .title {
      font-size: 36rpx;
      color: #000000;
      line-height: 56rpx;
    }

    .evaluateTag-text {
      font-size: 28rpx;
      color: #6b7280;
      line-height: 40rpx;
      margin-left: 16rpx;
    }
  }

  .evaluate-contentbox {
    display: flex;
    justify-content: center;
    flex-direction: column;
    width: 622rpx;
    margin: 0 auto 30rpx;
    box-sizing: border-box;
    border-bottom: 2rpx solid #eeeeee;
    padding-bottom: 30rpx;

    .evaluate-content {
      width: 100%;
      display: flex;
      justify-content: space-between;

      .user-headSmallImg {
        width: 64upx;
        height: 64upx;
        border-radius: 50%;
        margin-right: 16px;
      }
      .user-name{
        font-weight: 500;
        font-size: 28rpx;
        color: #000000;
        line-height: 40rpx;
      }
      .user-time{
        font-size: 24rpx;
        color: #6B7280;
        line-height: 32rpx;
      }
    }

    .evaluateDes-box {
      width: 100%;
      margin-top: 30upx;

      .evaluateDes {
        width: 100%;
      }
    }

    .addEvaluate {
      padding-top: 30upx;
    }
  }
}

.item-image-box {
  width: 100%;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  margin-left: -16rpx;

  .img-item {
    width: 191rpx;
    height: 191rpx;
    border-radius: 10upx;
    overflow: hidden;
    margin-left: 16rpx;
    margin-top: 10rpx;
    box-shadow: 0 0 3rpx #eee;
    &:nth-of-type(3n) {
      margin-right: 0;
    }
    image {
      width: 100%;
      height: 100%;
      display: block;
    }
  }
}

.item-like-box {
  display: flex;
  flex-direction: row;
  width: 690upx;
  align-items: center;
  justify-content: space-between;
}

.like-box {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;

  .like-img {
    width: 48upx;
    height: 48upx;
  }

  .like-num {
    font-size: 28upx;
    font-weight: 500;
    color: rgba(51, 51, 51, 1);
    margin-left: 10upx;
  }
}

.moreBox {
  width: 152rpx;
  height: 60rpx;
  border-radius: 8rpx 8rpx 8rpx 8rpx;
  border: 2rpx solid #ff5000;
  font-family: Roboto, Roboto;
  font-weight: 400;
  font-size: 28rpx;
  color: #ff5000;
  margin: 0 auto 50rpx auto;
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>
